<template>
  <div class="banner">
    <div @click="showSwiper">
      <div class="banner-img">
        <img
          src="//img1.qunarzz.com/sight/p0/1808/d8/d89ec1b26e92573ea3.water.jpg_600x330_e3e5f2b6.jpg"
        />
      </div>
      <div class="banner-title">海昌发现王国</div>
    </div>
    <div class="img-swiper" v-show="imgSwiper" @click="hideSwiper">
      <swiper :options="swiperOption">
        <swiper-slide v-for="item in bannerList" :key="item.id">
          <img :src="item.imgUrl" />
        </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
     
    </div>
  </div>
</template>

<script>
export default {
  name: "banner",
  data() {
    return {
      swiperOption: {
          pagination:{
              el:'.swiper-pagination',
              type : 'fraction'
          },
          loop:true
      },
      imgSwiper: "",
      bannerList: [
        {
          id: "01",
          imgUrl:
            "//qimgs.qunarzz.com/piao_qsight_provider_piao_qsight_web/0104h120007ysstjvFCA7.jpg_350x240_36ff9636.jpg",
        },
        {
          
          id: "02",
          imgUrl:
            "//img1.qunarzz.com/sight/p0/2003/ec/ecbf9114a42603d3a3.img.jpg_350x240_37a4ddca.jpg",  
        }
      ],
    };
  },
  methods: {
    showSwiper() {
      this.imgSwiper = true;
    },
    hideSwiper() {
      this.imgSwiper = false;
    },
  },
};
</script>

<style scoped>
.banner {
  position: relative;
}
.banner-img {
  width: 100%;
  overflow: hidden;
  height: 0;
  padding-bottom: 55%;
}
.banner-img img {
  width: 100%;
}
.banner-title {
  position: absolute;
  bottom: 0.3rem;
  left: 0.3rem;
  font-size: 0.5rem;
  color: #fff;
}
.img-swiper {
  background: #000;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-swiper img {
  width: 100%;
}
</style>